<template>
  <div class="wrapper">
    <div class="year-select">
      <span @click="showYearPicker = true" class="label">年份选择：</span>
      <span @click="showYearPicker = true">{{ queryForm.year || "全部" }}</span>
      <img src="@/assets/common/arrow-down.png" />
    </div>
    <div class="list" v-if="type == 1">
      <pull-refresh-list ref="myResultList" :limit="queryForm.size" :page-no.sync="queryForm.current" :data.sync="list" @getList="fetchData">
        <my-result-list-item :levelList="levelList" v-for="(item, index) in list" :key="index" :content="item" />
      </pull-refresh-list>
    </div>
    <div class="list" v-if="type == 2">
      <pull-refresh-list ref="copyResultList" :limit="queryForm.size" :page-no.sync="queryForm.current" :data.sync="list" @getList="fetchData">
        <copy-result-list-item v-for="(item, index) in list" :key="index" :content="item" />
      </pull-refresh-list>
    </div>

    <van-popup v-model="showYearPicker" position="bottom">
      <van-picker title="选择年份" :default-index="yearDefault" show-toolbar :columns="yearColumns" @confirm="onYearConfirm" @cancel="showYearPicker = false" />
    </van-popup>
  </div>
</template>

<script>
import myResultListItem from "./my-result-list-item.vue";
import copyResultListItem from "./copy-result-list-item.vue";
import { getMyAccessResult, getUnitResultAnnounce, getYearMyAccessResult, getYearUnitResultAnnounce } from "@/api/appraisalResults";
import { getDictionaryByType } from "@/api/common";
export default {
  components: {
    myResultListItem,
    copyResultListItem
  },
  props: {
    type: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      showYearPicker: false,
      queryFn: null,
      year: "2022",
      list: [],
      queryForm: {
        year: "",
        current: 1,
        size: 10
      },
      yearColumns: [],
      levelList: {}
    };
  },
  created() {
    this.queryFn =
      this.type == 1 ? (this.$route.query.type == "year" ? getYearMyAccessResult : getMyAccessResult) : this.$route.query.type == "year" ? getYearUnitResultAnnounce : getUnitResultAnnounce;
    if (this.$route.query.deptId) {
      this.queryForm.deptId = this.$route.query.deptId;
    }
    let year = new Date().getFullYear();
    for (let i = year - 5; i <= year; i++) {
      this.yearColumns.push(i);
    }
    this.yearColumns.push("全部");
    this.yearDefault = this.yearColumns.length - 1;
    if (this.type == 1) {
      this.getLevel();
    }
  },
  methods: {
    getLevel() {
      let type = this.$route.query.type == "year" ? "yearAssess" : "quarterAssess";
      this.levelList = {};
      getDictionaryByType(type).then(res => {
        res.data.forEach(ele => {
          this.$set(this.levelList, ele.dictValue, ele.dictLabel);
        });
      });
    },
    fetchData(callback) {
      this.queryFn(this.queryForm).then(res => {
        callback(res.data.records);
      });
    },
    onYearConfirm(year) {
      if (year == "全部") {
        this.queryForm.year = "";
      } else {
        this.queryForm.year = year;
      }
      this.showYearPicker = false;
      let ref = this.type == 1 ? "myResultList" : "copyResultList";
      this.$refs[ref].onSearch();
    }
  }
};
</script>

<style scoped lang="scss">
.wrapper {
  padding: 20px 16px;
  line-height: 20px;
  color: #333;
  font-size: 14px;
}
.year-select {
  display: flex;
  align-items: center;
  .label {
    color: #999999;
    margin-right: 8px;
  }
  img {
    width: 12px;
    margin-left: 8px;
  }
}
.list {
  margin-top: 12px;
}
</style>
